<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/all.css">
    <style>
        li{
            list-style: none;

        }

        li::before{

            /*  
            通过伪元素来设置图标文字
                1.找到要设置图标的元素通过before或after选择
                2.在content中设置字体的编码
                3.设置字体的样式
                    fab
                    font-family:'Font Awesome 5 Brands';

                    fas
                     font-family: 'Font Awesome 5 Free';
                     font-weight: 900;
            
            
            
            
            
            
            */


            content: '\f1b0';
            /* font-family: 'Font Awesome 5 Brands'; */
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            color: blue;
            margin-right: 10px;





        }
    </style>
</head>
<body>
    <!-- <i class="fas fa-cat"></i> -->
    <ul>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>
    <!-- 
        通过实体来使用图标文字：
            &#x +图标编码
     -->
    <span class="fas">&#xf1b0</span>
</body>
</html>
